<template>
  <div class="w1080px">
    <el-form
      v-if="data.itemType > 2"
      ref="dataRef"
      label-width="68px"
      :model="data"
      :rules="usersRules"
      class="wf hf"
    >
      <div class="nombpp h400px">
        <div class="x wn hf wf">
          <div class="w500px">
            <el-carousel height="400px">
              <el-upload
                v-if="data.fdataType"
                name="imgFile"
                :action="uploadURL"
                list-type="picture-card"
                :on-success="upSuccess"
                :auto-upload="false"
                style="position:absolute; z-index: 9; opacity:0.3;"
                ref="upload"
                :file-list="data.imgs"
                :on-preview="handlePictureCardPreview"
                :on-remove="imgRemove"
                accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PNG, .GIF, .BMP"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <el-carousel-item v-for="item in data.imgs" :key="item.url">
                <img class="fImg" :src="item.url" alt="加载失败" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="w360px hf" style="box-sizing: border-box; padding: 0px 10px 0px;">
            <el-input
              :readonly="!this.data.fdataType"
              class="f35px nohl"
              v-model="data.name"
              placeholder="请输入标题"
            ></el-input>
            <el-form-item label="行程路线" v-if="this.data.itemType < 6 || this.data.itemType>9">
              <el-input
                :readonly="!this.data.fdataType"
                class="m"
                placeholder="行程路线"
                v-model="data.trip"
              />
            </el-form-item>
            <el-form-item :label="this.data.itemType < 6 || this.data.itemType>9?'游览城市':'所在城市'">
              <el-input
                :readonly="!this.data.fdataType"
                class="m"
                :placeholder="this.data.itemType < 6 || this.data.itemType>9?'请输入游览城市':'请输入所在城市'"
                v-model="data.citys"
              />
            </el-form-item>
            <div style="margin: 10px 0px" class="el-divider el-divider--horizontal"></div>
            <el-form-item :label="this.data.itemType < 6 || this.data.itemType>9?'出行时间':'入住时间'">
              <el-date-picker
                v-model="runtime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="time"
                :default-time="['00:00:00', '23:59:59']"
                unlink-panels
                clear-icon
              ></el-date-picker>
            </el-form-item>
            <div class="x" style="margin-top: 10px">
              <el-form-item label="单价" label-width="40px">
                <el-input
                  :readonly="!this.data.fdataType"
                  class="prize"
                  placeholder="单价"
                  v-model="data.price"
                />
              </el-form-item>
              <el-form-item label="单位" label-width="40px" class="np">
                <el-input
                  :readonly="!this.data.fdataType"
                  width="10px"
                  class="prize"
                  placeholder="单位"
                  v-model="data.unit"
                />
              </el-form-item>
            </div>
            <div class="x ww zb">
              <el-form-item label="数量" label-width="40px">
                <el-input-number
                  size="mini"
                  style="width: 126px"
                  v-model="data.sum"
                  :min="1"
                  step-strictly
                  placeholder="1"
                  v-if="this.data.fdataType"
                  @change="money"
                />
                <el-input-number
                  size="mini"
                  style="width: 126px"
                  v-model="data.sum"
                  :min="1"
                  :max="data.max"
                  step-strictly
                  placeholder="1"
                  v-else
                  @change="money"
                ></el-input-number>
              </el-form-item>
              <el-button
                type="info"
                v-if="this.data.fdataType && data.itemType>2 && data.itemType<6"
                @click="mangeCarClick"
              >车辆管理</el-button>
            </div>
            <template v-if="data.itemType>2 && data.itemType<6">
              <el-form-item label="车型" label-width="40px">
                <div class="wf bx x ww">
                  <el-radio-group v-model="car" @change="money">
                    <el-radio-button v-for="item in data.cars" :key="item.name" :label="item.name" />
                  </el-radio-group>
                </div>
              </el-form-item>
            </template>

            <el-divider>
              总价:
              <span style="color:red;">
                <strong>{{dMoney}}</strong>
              </span>
              {{dpc}}
            </el-divider>
            <el-row :gutter="20" type="flex" justify="space-around">
              <el-col :span="8">
                <el-button
                  type="primary"
                  @click="BuyItem"
                  :disabled="data.fdataType?true:false"
                >立即预定</el-button>
              </el-col>
              <el-col :span="8">
                <el-button
                  type="primary"
                  @click="shoppingtrolleys"
                  :disabled="data.fdataType?true:false"
                >加入购物车</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="w220px hf">
            <el-select
              v-if="this.data.fdataType"
              v-model="notices"
              multiple
              placeholder="请选择"
              collapse-tags
              @change="data.notice=notices.reduce((a,b)=>{return a|b})"
            >
              <el-option
                v-for="item in g4.notice"
                :key="item.id"
                :label="item.name"
                :value="item.cid"
              />
            </el-select>

            <template v-for="item in g4.notice">
              <div
                :key="item.ID"
                v-html="'&emsp;&emsp;'+item.info"
                class="f12px x wf bxb"
                v-if="data.notice&item.cid"
              />
            </template>

            <!-- <div class="f12px x wf" v-for="item in data.notice" :key="item">
              <div>{{item}}.</div>
              <div :key="item.ID" v-html="item.info" class="x ww wf" v-if="data.notice&item.cid" />
            </div>-->
          </div>
        </div>
      </div>
    </el-form>
    <div class="wf">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="a=>{activeIndex=a;}"
      >
        <el-menu-item v-if="data.itemType > 2" index="1">宝贝详情</el-menu-item>
        <el-menu-item v-if="data.itemType > 2" index="2">累计评论</el-menu-item>
        <el-menu-item v-if="data.itemType > 2" index="3">专项承诺</el-menu-item>
        <el-input
          v-else
          :readonly="!this.data.fdataType"
          class="f35px nohl"
          v-model="data.name"
          placeholder="请输入标题"
        ></el-input>
        <el-button
          @click="send(data)"
          v-if="data.fdataType"
          type="primary"
          plain
          style="margin-top: 10px"
        >立即发布</el-button>
      </el-menu>
      <el-card v-if="activeIndex=='1'">
        <kindeditor v-if="this.data.fdataType" v-model="data.info"></kindeditor>
        <template v-else>
          <div ref="info" v-html="data.info"></div>
          <div class="x ww wf">
            <carDisplay v-for="item in this.data.cars" :key="item.name" :fdata="item" :edit="0" />
          </div>
        </template>
      </el-card>
      <el-card v-else-if="activeIndex=='2'">
        <el-card v-for="item in itemEval" :key="item.ID">
          <div class="x wn jc">
            <el-rate disabled v-model="item.score" show-text></el-rate>
            <el-tag>发表用户:{{item.user.displayName}}</el-tag>
          </div>
          <el-tag type="info">{{item.name}}</el-tag>
          <div v-html="item.info"></div>
        </el-card>
      </el-card>
      <el-card v-else>
        <el-select
          v-if="this.data.fdataType"
          v-model="promises"
          multiple
          placeholder="请选择专项承诺"
          collapse-tags
          @change="data.promise=promises.reduce((a,b)=>{return a|b})"
        >
          <el-option v-for="item in g4.promise" :key="item.id" :label="item.name" :value="item.cid"></el-option>
        </el-select>

        <template v-for="item in g4.promise">
          <div :key="item.ID" v-html="item.info" class="bxb" v-if="data.promise&item.cid">123</div>
        </template>
      </el-card>
    </div>
    <el-dialog :visible.sync="mangeCar" width="600px" title="车型管理">
      <div class="wf x wn">
        <el-radio-group
          v-model="carName"
          @change="mangeCarSelect"
          size="mini"
          class="y jc w120px bxr"
        >
          <el-radio v-for="item in cars" :key="item.name" :label="item.name" border class="m5px" />
          <el-button type="primary" size="mini" plain @click="mangeCarSelect(0)">新增车型</el-button>
        </el-radio-group>
        <carDisplay :fdata="cCar" :edit="data.fdataType" @change="infoChange" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mangeCar = false">取 消</el-button>
        <el-button type="primary" @click="mangeCarSelect(-1)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import kindeditor from "../kindeditor";
import carDisplay from "../item/carDisplay.vue";

export default {
  mounted() {
    this.$nextTick(() => {
      // this.$refs.info.innerHTML = this.data.info;
    });
  },
  components: { kindeditor, carDisplay },
  props: ["fdata", "g4"],
  watch: {
    fdata: {
      handler(newValue, oldValue) {
        this.fdata = newValue;
        this.initData();
      }
    },
    runtime(a, b) {
      if (a && b) {
        this.data.beginTime = this.formatdate(a[0]);
        this.data.endTime = this.formatdate(a[1]);
      }
    }
  },
  data() {
    return {
      promises: [],
      notices: [],
      mangeCar: false,
      cars: [],
      cCar: {},
      carName: "",
      value: 0,
      data: {},
      car: null,
      dMoney: "",
      dpc: "",
      itemEval: [],
      runtime: null,
      activeIndex: "1",
      content: null,
      options: {},
      usersRules: {
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
        ]
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      api: "",
      uploadURL: "/upload_json.php"
    };
  },
  created() {
    let tmp = this.$axios.defaults.baseURL;
    this.api =
      tmp.substr(-1) == "/" || tmp.substr(-1) == "\\"
        ? tmp.substr(0, tmp.length - 1)
        : tmp;
    this.uploadURL = this.api + this.uploadURL;
    this.initData();
    // console.log(this.$cp(this.fdata));
  },
  methods: {
    upSuccess(a, b, c) {
      if (a.error) {
        this.$message.error("不支持此类文件");
        this.handleRemove(b);
      } else {
        this.$message.success("上传成功");
        this.data.imgs = this.$refs.upload.uploadFiles;
      }
    },
    imgRemove(file) {
      let tmp = false;
      if (file.response && !file.response.error) tmp = file.response.url;
      if (file.url.substr(0, 5) != "blob:") tmp = file.url;
      if (tmp) this.$axios.post(this.uploadURL, "del=" + tmp);
      this.data.imgs = this.$refs.upload.uploadFiles;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    BuyItem() {
      console.log(this.$cp(this.data));
    },
    shoppingtrolleys() {
      console.log(this.$cp(this.data));
    },
    id2info(arr, id) {
      for (let i in arr) {
        if (arr[i].ID == id) return arr[i].info;
      }
    },
    id2item(arr, id) {
      for (let i in arr) {
        if (arr[i].ID == id) return arr[i];
      }
    },
    valOnly(arr, item) {
      for (let i in arr) {
        if (arr[i] == item) return false;
      }
      return true;
    },
    initData() {
      if (!this.fdata) return; // $api+
      this.data = this.fdata;
      this.data.sum = 1;
      this.data.imgs = this.data.imgs.map(b => {
        if (b.url.substr(0, 1) == "/") b.url = this.$api + b.url;
        return b;
      });
      if (this.data.beginTime)
        this.runtime = [
          new Date(this.data.beginTime),
          new Date(this.data.endTime)
        ];
      if (typeof this.data.cars == "string") {
        this.data.cars = JSON.parse(this.data.cars);
      }
      if (!this.car && this.data.cars.length)
        this.car = this.$cp(this.data.cars[0].name);
      this.promises = [];
      for (let i = 0; i < this.g4.promise.length; i++) {
        let tmp = this.g4.promise[i].cid;
        if (tmp == (tmp & this.data.promise)) this.promises.push(tmp);
      }
      this.notices = [];
      for (let i = 0; i < this.g4.notice.length; i++) {
        let tmp = this.g4.notice[i].cid;
        if (tmp == (tmp & this.data.notice)) this.notices.push(tmp);
      }
      // console.log(this.$cp(this.data));
      this.money();
      return;
    },
    send(vd) {
      console.log(this.$cp(this.p));
      return;
      const d = {
        cmd: this.data.fdataType,
        val: this.$del(this.$cp(vd), [
          "createTime",
          "changeTime",
          "useTime",
          "fdataType",
          "pageView",
          "power",
          "user"
        ])
      };
      if (d.val.imgs) {
        const len = this.api.length;
        d.val.imgs = d.val.imgs.map(a => {
          let ret = a.url;
          if (a.response) {
            ret = this.$axios.defaults.baseURL + a.response.url.substr(1);
          }
          if (ret.substr(0, len) == this.api) ret = ret.substr(len);
          return { url: ret };
        });
      }
      if (d.val.id) {
        d.cmd = 1;
        d.val.where = { id: d.val.id };
        d.val = this.$del(d.val, ["id"]);
      } else {
        d.cmd = 2;
      }
      if (!d.val.token) d.val.token = sessionStorage.getItem("token");
      if (!d.val.table) d.val.table = "items";
      this.$axios
        .post("q.php", d)
        .then(r => {
          const data = r.data;
          if (data.result && !data.result.error) {
            this.$message.success("上传成功!");
            this.$emit("cEvent", 1);
          } else {
            this.$message.error("上传失败!");
          }
        })
        .catch(err => {
          // console.log(err);
        });
      // console.log(this.$cp(d.val));
    },
    money() {
      if (!this.data.sum) this.data.sum = 1;
      let p = this.data.price * this.data.sum;
      let c = 0;
      if (this.car) {
        for (let i = 0; i < this.data.cars.length; i++) {
          if (this.data.cars[i].name == this.car) {
            c = Number(this.data.cars[i].price);
            break;
          }
        }
      }
      this.dMoney = p;
      this.dpc = "";
      if (this.data.itemType > 2 && this.data.itemType < 6) {
        this.dMoney += c;
        this.dpc = "(票价:" + p;
        this.dpc += "+车型:" + c;
        this.dpc += ")";
      }
    },
    mangeCarClick() {
      this.mangeCar = true;
      this.cars = this.$cp(this.data.cars);
      this.carName = this.$cp(this.cars[0].name);
    },
    mangeCarSelect(a) {
      if (a === 0) {
        const tmp = {
          name: "新增车型" + (this.cars.length + 1),
          info: "",
          price: 0
        };
        this.cars.push(tmp);
        this.carName = this.$cp(tmp.name);
        // this.newCar = tmp;
      } else if (a === -1) {
        this.mangeCar = false;
        this.cars.price = Number(this.cars.price);
        this.data.cars = this.$cp(this.cars);
      } else {
        let tmp = this.cars.v2item(a, "name");
        this.carName = this.$cp(tmp.name);
        this.cCar = tmp;
      }
    },
    infoChange(a, b) {
      // console.log(this.$cp(this.newCar), this.$cp(this.cars));
      // console.log(b);
    }
  }
};

// lang="less"
</script>

<style  scoped>
.el-form-item {
  margin-bottom: 0px;
}

.m >>> .el-input__inner {
  height: 20px;
  line-height: 20px;
  padding: 0px;
}
.nohl >>> .el-input__inner {
  height: 46px;
  line-height: 100%;
  padding: 0px;
}
.nohl {
  padding-left: 10px;
  box-sizing: border-box;
}
.m >>> .el-form-item__content {
  line-height: 24px;
}
.np >>> .el-form-item__label {
  padding: 0px;
}
.el-divider {
  margin: 20px 0px;
}
.prize >>> .el-input__inner {
  color: red;
  font-size: 30px;
  font-family: "PingFang SC";
}
.nombpp >>> .el-header {
  margin: 0px;
  border: 0px;
  padding: 0px;
}
.time {
  width: 272px !important;
}
</style>
